<template>
   <li class="commentItem">
          <img :src="imgUrl">
          <div class="comment">
            <p><span>{{userName}}:</span> {{content}}</p>
            <p class="reply" v-show="replyCom.content!=null"><span>@{{replyCom.user.nickname}}:</span> {{replyCom.content}}</p>
          </div>
          <span class="action" @click="likeComent()">
            <i :class="`iconfont ${t==0?'icon-dianzan_kuai active':'icon-dianzan'}`"></i>{{likeCount-t+1}}
            </span>
          <span class="time">{{createTime(time)}}</span>
    </li>
</template>

<script>
// 引入moment时间库
import moment from 'moment'
// 引入点赞接口
import {likeCommentAPI} from '@/api'
export default {
    name:'CommentItem',
    data() {
      return {
        t:1
      }
    },
    props:['imgUrl','id','userName','content','time','commentId','likeCount','type','reply'],
    methods:{
      //获取评论时间
      createTime(time){
        const timer = moment(time);
        let nowTime = new Date().getTime();
        if(nowTime-time>31536000000){
          return timer.format("YYYY年MM月DD日 HH:mm");
        }else{
          return timer.format("MM月DD日 HH:mm")
        }
      },
      // 评论点赞
      async likeComent(){
        const res = await likeCommentAPI({id:this.id,cid:this.commentId,t:this.t,type:this.type});
        if(res.data.code==200){
          this.t = this.t==0 ? 1 : 0;
        }else{
          alert('网络错误');
        }
      }
    },
    computed:{
      // 防止没有数据报错
      replyCom(){
        if(this.reply&&this.reply[0]!=undefined&&this.reply[0]!=null){
          return this.reply[0];
        }else{
          let reply = {content:null,user:{nickname:''}};
          return reply;
        }
      }
    }
}
</script>

<style lang="less" scoped>
   .commentItem{
      width: 100%;
      position: relative;
      display: flex;
      padding-bottom: 30px;
      border-bottom: 1px solid rgba(190, 190, 190,0.3);
      img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-top: 10px;
      }
      p{
        display: block;
        margin: 0;
        width: 500px;
        font-size: 13px;
        margin-top: 8px;
        margin-left: 14px;
        color: #444;
        word-break: break-all;
        span{
          color: rgb(84,128,177);
        }
      }
      .reply{
        width: 484px;
        background-color: rgb(241,241,241);
        border-radius: 5px;
        padding: 8px 8px;
      }
      .action{
       position: absolute;
       bottom: 10px;
       right: 20px;
       font-size: 13px;
       cursor: pointer;
       color: #777;
       i{
         font-size: 13px;
       }
       i.active{
         color: #ff7a9e;
       }
      }
      .action:hover{
        color: black;
      }
      .time{
        font-size: 12px;
        color: #999;
        position: absolute;
        bottom: 10px;
        left: 50px;
      }
    }
</style>